<template>
  <scroll-view class="result-container" scroll-y>
    <uni-collapse accordion :value="internalActiveCollapse" @change="handleCollapseChange">
      <uni-collapse-item
        v-for="(item, index) in results"
        :key="'main_' + index"
        :name="'main_' + index"
        :title="getResultTitle(item)"
      >
        <!-- 一级展开内容 -->
        <view class="primary-detail">
          <!-- 语言字段垂直排列 -->
          <view class="language-list">
            <view class="language-item" v-for="lang in languageDisplayOrder" :key="lang.key">
              <text class="language-label">{{ lang.label }}：</text>
              <text 
                class="language-value clickable"
                @click="copyToClipboard(item[lang.key] || '-')"
              >
                {{ item[lang.key] || '-' }}
              </text>
              <!-- 仅在藏文下方显示详细信息展开按钮 -->
              <template v-if="lang.key === 'བོད་ཡིག藏语'">
                <button
                  class="expand-button"
                  @click="toggleTibetanDetails(index)"
                >
                  {{ activeTibetan.includes(index) ? 'ཞིབ་ཕྲའི་ཆ་འཕྲིན་བསྡུ་བ།' : 'ཞིབ་ཕྲའི་ཆ་འཕྲིན་འགྲེམས་པ།' }}
                </button>
                <!-- 藏文详细信息 -->
                <view
                  v-if="activeTibetan.includes(index)"
                  class="tibetan-subdetail"
                >
                  <view
                    v-for="(value, key) in tibetanSubDetails(item)"
                    :key="key"
                    class="subdetail-row"
                  >
                    <text class="sub-label">{{ key }}：</text>
                    <text 
                      class="sub-value clickable"
                      @click="copyToClipboard(value)"
                    >
                      {{ value }}
                    </text>
                  </view>
                </view>
              </template>
            </view>
          </view>

          <!-- 基础信息 -->
          <view class="basic-info">
            <view class="detail-row" v-for="(value, key) in primaryDetails(item)" :key="key">
              <text class="label">{{ key }}：</text>
              <text 
                class="value clickable"
                @click="copyToClipboard(value)"
              >
                {{ value }}
              </text>
            </view>
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>

    <view v-if="showEmptyState" class="empty-state">
      <uni-icons type="search" size="48" color="#999" />
      <text class="empty-text">{{ emptyText }}</text>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'SearchResults',
  props: {
    results: {
      type: Array,
      default: () => []
    },
    activeCollapse: {
      type: Array,
      default: () => []
    },
    activeTibetan: {
      type: Array,
      default: () => []
    },
    showEmptyState: Boolean,
    emptyText: String
  },
  data() {
    return {
      internalActiveCollapse: Array.isArray(this.activeCollapse)
        ? [...this.activeCollapse]
        : [],
      languageDisplayOrder: [
        { key: 'བོད་ཡིག藏语', label: 'བོད་ཡིག' },
        { key: 'རྒྱ་ཡིག汉语', label: 'རྒྱ་ཡིག' },
        { key: 'སོག་ཡིག蒙古语', label: 'སོག་ཡིག' },
        { key: 'ཡུ་གུར་ལ་ཏིང་སྒྱུར་འབྲི།维吾尔语拉丁转写', label: 'ཡུ་གུར་ལ་ཏིང་སྒྱུར་འབྲི།' },
        { key: 'མན་ཇུ།满语', label: 'མན་ཇུ།' }
      ]
    };
  },
  watch: {
    activeCollapse(newVal) {
      this.internalActiveCollapse = Array.isArray(newVal)
        ? [...newVal]
        : [];
    }
  },
  methods: {
    handleCollapseChange(e) {
      this.internalActiveCollapse = e.detail;
      this.$emit('update:active-collapse', e.detail);
    },
    getResultTitle(item) {
      return [
        item['བོད་ཡིག藏语'],
        item['རྒྱ་ཡིག汉语'],
        item['སོག་ཡིག蒙古语'],
        item['ཡུ་གུར་ལ་ཏིང་སྒྱུར་འབྲི།维吾尔语拉丁转写'],
        item['མན་ཇུ།满语']
      ]
        .filter(Boolean)
        .join(' / ');
    },
    primaryDetails(item) {
      return {
        'བམ་པོ།': item['བམ་པོ།卷'] || '-',
        'སྡེ།': item['སྡེ།部'] || '-',
        'སྐོར།': item['སྐོར།类'] || '-',
        'ཚན་པ།': item['ཚན་པ།则'] || '-',
        'ཟོར་ཡང་ཡིག་གཟུགས།': item['ཟོར་ཡང་ཡིག་གཟུགས།简体字'] || '-',
		'སོག་ཡིག་ལ་ཏིང་སྒྱུར་འབྲི།': item['སོག་ཡིག་ལ་ཏིང་སྒྱུར་འབྲི།蒙古文拉丁转写'] || '-',
		'ཡུ་གུར།': item['ཡུ་གུར།维语'] || '-',
      };
    },
    tibetanSubDetails(item) {
      return {
        'མིང་གཤིས།': item['མིང་གཤིས།词性'] || '无',
        'རྟགས་མཆན།': item['རྟགས་མཆན།词性标注'] || '未标注',
        'བརྡ་སྤྲོད་སྒྲིག་སྲོལ།': item['བརྡ་སྤྲོད་སྒྲིག་སྲོལ།句法规则'] || '无',
        'བོད་ཡིག་ལ་ཏིང་སྒྱུར་འབྲི།': item['བོད་ཡིག་ལ་ཏིང་སྒྱུར་འབྲི།藏文拉丁转写'] || '无'
      };
    },
    toggleTibetanDetails(index) {
      const newTibetan = [...this.activeTibetan];
      const tibetanIndex = newTibetan.indexOf(index);

      if (tibetanIndex > -1) {
        newTibetan.splice(tibetanIndex, 1);
      } else {
        newTibetan.push(index);
      }

      this.$emit('update:active-tibetan', newTibetan);
    },
    copyToClipboard(text) {
      navigator.clipboard.writeText(text).then(() => {
        uni.showToast({
          title: 'སྦྱར་པང་དུ་འདྲ་བཟོ་བྱས་ཟིན།',
          icon: 'success',
          duration: 2000
        });
      }).catch(() => {
        uni.showToast({
          title: 'འདྲ་བཟོ་བྱས་མེད།།',
          icon: 'none',
          duration: 2000
        });
      });
    }
  }
};
</script>

<style>
.primary-detail {
  padding: 10px;
}

.language-list {
  margin-bottom: 15px;
}

.language-item {
  margin-bottom: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.language-label {
  font-size: clamp(14px, 3vw, 20px);
  font-weight: bold;
  color: #333;
  margin-right: 8px;
}

.language-value,
.sub-value,
.detail-row .value {
  font-size: clamp(12px, 2.8vw, 18px);
  color: #666;
  flex: 1;
  cursor: pointer; /* 鼠标指针样式 */
}

.language-value.clickable:hover,
.sub-value.clickable:hover,
.detail-row .value.clickable:hover {
  color: #3498db; /* 鼠标悬停时颜色变化 */
  text-decoration: underline; /* 鼠标悬停时下划线效果 */
}

.basic-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.detail-row .label {
  font-size: clamp(14px, 3vw, 20px);
  font-weight: bold;
  color: #555;
}

.tibetan-subdetail {
  padding: 10px;
  background: #f8f8f8;
}

.subdetail-row .sub-label {
  font-size: clamp(12px, 2.6vw, 16px);
  color: #444;
}

.subdetail-row .sub-value {
  font-size: clamp(12px, 2.6vw, 16px);
  color: #444;
}

.expand-button {
  font-size: 14px; /* 合适的字体大小 */
  background-color: #3498db; /* 蓝色背景 */
  color: #ffffff; /* 白色文字 */
  border: none; /* 去掉默认边框 */
  border-radius: 4px; /* 添加轻微圆角 */
  padding: 2px 6px; /* 添加内边距 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  transition: background-color 0.3s ease; /* 平滑的背景色过渡效果 */

  &:hover {
    background-color: #2980b9; /* 鼠标悬停时更深的蓝色 */
  }

  &:active {
    background-color: #2980b9; /* 点击时更深的蓝色 */
  }
}
</style>